<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PodGrab</title>
    {{template "commoncss" .}}
    <style>
        .button-delete{
            background-color: indianred;
            color:wheat;
        }
        img{
            display: none;
        }
        @media (max-width: 750px) {
        .label-body{
      display: inline!important;
  }
        }
        /* Larger than tablet */
@media (min-width: 750px) {
  img{
    display: block
  }

}
    </style>
</head>
<body>
    <div class="container">

{{template "navbar" .}}
<br>
<div class="row">
    <div class="columns two">
        <a href="/backups" class="button">Backups</a>
    </div>
    <div class="columns three">
        <a href="/opml" class="button" title="Export OPML file with original podcast urls">Export OPML (Original Urls)</a>
    </div>
        <div class="columns three">
        <a href="/opml?usePodgrabLink=true" class="button" title="Export OPML file with Podgrab podcast feed urls">Export OPML (Podgrab Urls)</a>
    </div>
    <div class="columns two">
        <a title="Import this rss feed in your favorite podcast player" target="_blank" href="/rss" class="button">Rss Feed</a>
    </div>
</div>
<hr>
<div class="row" id="app">
    <div class="columns six">
    <form action="/saveSettings" method="post" @submit="saveSettings" >
        <div class="row">
            <h3>Settings</h3>
        <label for="downloadOnAdd">
            <input type="checkbox" name="downloadOnAdd" v-model="downloadOnAdd">
            <span class="label-body">Download episodes whenever new podcast is added</span>
        </label>
    </div>

        <div v-if="downloadOnAdd">
           
        <label for="initialDownloadCount" style="display: inline-block;" >
            <span class="label-body">How many episodes to be downloaded when a new podcast is added</span>


        </label>
        &nbsp;
        <input type="number" name="initialDownloadCount" v-model.number="initialDownloadCount" min="0">
    </div>
   
        <label for="autoDownload">
            <input type="checkbox" name="autoDownload" v-model="autoDownload">
            <span class="label-body">Automatically download new episodes to the disk</span>
        </label>
     
        <label for="appendDateToFileName">
            <input type="checkbox" name="appendDateToFileName" v-model="appendDateToFileName">
            <span class="label-body">Append episode date to episode file name</span>
        </label>
       
        <label for="appendEpisodeNumberToFileName">
            <input type="checkbox" name="appendEpisodeNumberToFileName" v-model="appendEpisodeNumberToFileName">
            <span class="label-body">Append episode number to episode file name</span>
        </label>

        <label for="darkMode">
            <input type="checkbox" name="darkMode" v-model="darkMode">
            <span class="label-body">Use Dark Mode</span>
        </label>
        <label for="downloadEpisodeImages">
            <input type="checkbox" name="downloadEpisodeImages" v-model="downloadEpisodeImages">
            <span class="label-body">Download Episode Images with files</span>
        </label>
        <label for="generateNFOFile">
            <input type="checkbox" name="generateNFOFile" v-model="generateNFOFile">
            <span class="label-body">Generate NFO files for Podcasts</span>
        </label>
        <label for="dontDownloadDeletedFromDisk">
            <input type="checkbox" name="dontDownloadDeletedFromDisk" v-model="dontDownloadDeletedFromDisk">
            <span class="label-body">Don't re-download files deleted from disk.</span>
        </label>
        <label for="baseUrl">
            <span class="label-body">Base URL (if accessing Podgrab using a URL. Without trailing /. Leave empty if not using or unsure.)</span>
            <input type="url" class="u-full-width"  name="baseUrl" v-model="baseUrl">
        </label>
        <label for="maxDownloadConcurrency" style="display: inline-block;" >
            <span class="label-body">Limit the number of podcasts that can be downloaded simultaneously</span>
            <input type="number" name="maxDownloadConcurrency" v-model.number="maxDownloadConcurrency" min="1">
        </label>
        <label for="userAgent" style="display: inline-block;" >
            <span class="label-body">The <code>User-Agent</code> header used when downloading podcasts</span>
            <input type="text" class="u-full-width" name="userAgent" v-model="userAgent">
        </label>
      
        <input type="submit" value="Save" class="button">
    </form>
</div>
<div class="columns six">
    <div class="row">
        <h3>Disk Stats</h3>
        <table>
            <tr>
                <td>Disk Used</td>
                <td>{{formatFileSize .diskStats.Downloaded}}</td>
            </tr>
            <tr>
                <td>Pending Download</td>
                <td>{{ formatFileSize .diskStats.PendingDownload }}</td>
            </tr>
        </table>
    </div>
</div>
</div>
<hr>
<div class="row">
    <div class="columns twelve">
        <h3>More Info</h3>
        <p style="font-style: italic;">
            This project is under active development which means I release new updates very frequently. I will eventually build the version management/update checking mechanism. Until then it is recommended that you use something like watchtower which will automatically update your containers whenever I release a new version or periodically rebuild the container with the latest image manually.
        </p>
        <table>
            <tr>
                <td>Current Version</td>
                <td>  2022.07.07</td>
            </tr>
            <tr>
                <td>Website</td>
                <td><a href="https://github.com/akhilrex/podgrab" target="_blank">https://github.com/akhilrex/podgrab</a></td>
            </tr>
            <tr>
                <td>Found a bug</td>
                <td><a href="https://github.com/akhilrex/podgrab/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc" target="_blank" rel="noopener noreferrer">Report here</a></td>
            </tr>
            <tr>
                <td>Feature Request</td>
                <td><a href="https://github.com/akhilrex/podgrab/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc" target="_blank" rel="noopener noreferrer">Request here</a></td>
            </tr>
            <tr>
                <td>Support the developer</td>
                <td><a href="https://www.buymeacoffee.com/akhilrex" target="_blank" rel="noopener noreferrer">Buy him a beer!!</a></td>
            </tr>
        </table>
        
    </div>
</div>

{{template "scripts"}}
<script>
var app = new Vue({
  delimiters: ['${', '}'],
  el: '#app',
  mounted(){
    this.originalThemeSetting= this.darkMode;
  },
  methods:{
      saveSettings:function(e){
          e.preventDefault();
          var self=this;
        self.searching=true;
        axios.post("/settings",{
            downloadOnAdd: self.downloadOnAdd,
            initialDownloadCount:self.initialDownloadCount,
            autoDownload:self.autoDownload,
            appendDateToFileName:self.appendDateToFileName,
            appendEpisodeNumberToFileName:self.appendEpisodeNumberToFileName,
            darkMode:self.darkMode,
            downloadEpisodeImages:self.downloadEpisodeImages,
            generateNFOFile:self.generateNFOFile,
            dontDownloadDeletedFromDisk:self.dontDownloadDeletedFromDisk,
            baseUrl:self.baseUrl,
            maxDownloadConcurrency:self.maxDownloadConcurrency,
            userAgent:self.userAgent,
        })
        .then(function(response){
            Vue.toasted.show('Settings saved successfully.' ,{
                theme: "bubble",
                type: "success",
                position: "top-right",
                duration : 5000
            })
            console.log(self.originalThemeSetting);
            if(self.originalThemeSetting!= self.darkMode){
                window.location.reload()
            }
        })
        .catch(function(error){
            if (error.response && error.response.data && error.response.data.message) {


            Vue.toasted.show(error.response.data.message, {
                theme: "bubble",
                type: "error",
                position: "top-right",
                duration : 5000
            })
            }

        }).
        then(function(){

        })
          return false;
      }
  },
  data: {
    downloadOnAdd: {{ .setting.DownloadOnAdd }},
    initialDownloadCount: {{ .setting.InitialDownloadCount }},
    autoDownload: {{ .setting.AutoDownload }},
    appendDateToFileName: {{ .setting.AppendDateToFileName }},
    appendEpisodeNumberToFileName:{{ .setting.AppendEpisodeNumberToFileName }},
    darkMode:{{ .setting.DarkMode }},
    originalThemeSetting:{{ .setting.DarkMode }},
    downloadEpisodeImages:{{.setting.DownloadEpisodeImages }},
    generateNFOFile:{{ .setting.GenerateNFOFile }},
    dontDownloadDeletedFromDisk:{{ .setting.DontDownloadDeletedFromDisk }},
    baseUrl: {{ .setting.BaseUrl }},
    maxDownloadConcurrency:{{ .setting.MaxDownloadConcurrency }},
    userAgent:{{ .setting.UserAgent}},
  },

})
    </script>
</body>
</html>
